<template>
  <div class="register">
    <!-- 部门数据
      <el-col :span="4" :xs="24">
        <div style="margin-top: 20px">
          <el-input
            v-model="deptName"
            placeholder="请输入部门名称"
            clearable
            size="small"
            prefix-icon="el-icon-search"
            style="margin-bottom: 20px"
          />
        </div>
        <div class="head-container"></div>
      </el-col> -->
    <!-- 用户数据 -->
    <el-col :span="22">
      <!-- 表格 -->
      <el-table
        :data="
          createData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        :header-cell-style="{
          color: '#515a6e',
          'font-size': '15px',
          background: '#f8f8f9',
        }"
        @sort-change="sortChange"
        :cell-style="{ padding: '9px' }"
        style="width: 100%; margin-left: 50px"
      >
        <el-table-column prop="userName" label="姓名" align="center">
        </el-table-column>
        <el-table-column prop="userId" label="工号" align="center">
        </el-table-column>
        <el-table-column prop="deptName" label="隶属部门" align="center">
        </el-table-column>
        <el-table-column prop="leaderName" label="负责人" align="center">
        </el-table-column>
        <el-table-column prop="phonenumber" label="电话" align="center">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="注册时间"
          align="center"
          sortable="custom"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          width="200px"
          class-name="small-padding fixed-width"
        >
          <template slot-scope="scope">
            <!-- 审核通过 -->
            <el-button
              @click="showPassCreateApproval(scope.$index, createData)"
              type="text"
              size="mini"
              icon="el-icon-circle-check"
              >审核通过</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="main-pagination">
        <el-pagination
          style="float: right; margin-top: 20px"
          background
          prev-text="<"
          next-text=">"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="createData.length"
        >
        </el-pagination>
      </div>
    </el-col>
  </div>
</template>
<script>
import { getCreateData, approveRegister } from "@/api/manage/userManage";
export default {
  inject: ["reload"],
  data: function () {
    return {
      userId: this.$store.getters.userId,
      userName: this.$store.getters.userName,
      dept: this.$store.getters.userDept,
      getTime: "",
      currentPage: 1,
      pageSize: 10,
      createData: [
        {
          userName: "李四",
          userId: 12138,
          deptName: "xx部门",
          leaderName: "张三",
          createTime: "2021-7-11 16:34:32",
          phonenumber: "123-1234-1234",
        },
        {
          userName: "李四",
          userId: 12138,
          deptName: "xx部门",
          leaderName: "张三",
          createTime: "2021-7-11 16:34:32",
          phonenumber: "123-1234-1234",
        },
        {
          userName: "李四",
          userId: 12138,
          deptName: "xx部门",
          leaderName: "张三",
          createTime: "2021-7-11 16:34:32",
          phonenumber: "123-1234-1234",
        },
        {
          userName: "李四",
          userId: 12138,
          deptName: "xx部门",
          leaderName: "张三",
          createTime: "2021-7-11 16:34:32",
          phonenumber: "123-1234-1234",
        },
        {
          userName: "李四",
          userId: 12138,
          deptName: "xx部门",
          leaderName: "张三",
          createTime: "2021-7-11 16:34:32",
          phonenumber: "123-1234-1234",
        },
        {
          userName: "李四",
          userId: 138,
          deptName: "xx部门",
          leaderName: "张三",
          createTime: "2021-7-11 16:34:32",
          phonenumber: "123-1234-1234",
        },
      ],
      detailsData: {
        userId: undefined,
      },
    };
  },
  created: function () {
    let data = {
      userId: this.userId,
    };
    getCreateData(data)
      .then((res) => {
        this.createData = res.data;
      })
      .catch((e) => {
        console.log(e);
      });
  },
  methods: {
    //注册账号审批通过
    async showPassCreateApproval(index, rows) {
      index = (this.currentPage - 1) * this.pageSize + index;
      this.detailsData = rows[index];
      const url = require("@/assets/image/manage/warn.png");
      const confirmRes = await this.$confirm(
        "<img src=" +
          url +
          `><p style="margin-top:60px;">您确认要<span style="color:#02A7F0">通过</span>${this.detailsData.userId}号 ${this.detailsData.userName}的部门认证申请吗？</p>`,
        "",
        {
          dangerouslyUseHTMLString: true,
          customClass: "messageBox-unsubscribe",
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          cancelButtonClass: "btn-cancel-unsubscribe",
          confirmButtonClass: "btn-confirm-unsubscribe",
          center: true,
          showClose: false,
          type: "warning",
        }
      ).catch((err) => err); //用catch来捕获错误消息
      if ("confirm" === confirmRes) {
        //用户点击了确认
        this.passCreateApproval();
      }
    },
    //注册审批通过 +-+ ✔
    passCreateApproval() {
      this.getCurrentTime();
      let data = {
        oprtId: this.userId,
        time: this.getTime,
        userId: this.detailsData.userId,
      };
      console.log(data);
      let body = JSON.stringify(data);
      // axios
      approveRegister(body)
        .then((res) => {
          let value = res.code;
          if (value == 200) {
            this.change();
            console.log("成功");
            this.$message({
              type: "success",
              message: "审批成功",
            });
          } else console.log("失败");
        })
        .catch((e) => {
          this.$message({
            type: "error",
            message: "注册审批失败",
          });
          console.log(e);
        });
    },
    // 每页多少条
    handleSizeChange(val) {
      this.pageSize = val;
    },
    // 当前页
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    sortChange({ prop, order }) {
      this.createData.sort(this.compare(prop, order));
    },
    compare(propertyName, sort) {
      return function (obj1, obj2) {
        var value1 = obj1[propertyName];
        var value2 = obj2[propertyName];
        if (typeof value1 === "string" && typeof value2 === "string") {
          const res = value1.localeCompare(value2, "zh");
          return sort === "ascending" ? res : -res;
        } else {
          if (value1 <= value2) {
            return sort === "ascending" ? -1 : 1;
          } else if (value1 > value2) {
            return sort === "ascending" ? 1 : -1;
          }
        }
      };
    },
    //获取时间
    getCurrentTime() {
      //获取当前时间并打印
      var _this = this;
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      let dd = new Date().getDate();
      let hh = new Date().getHours();
      let mf =
        new Date().getMinutes() < 10
          ? "0" + new Date().getMinutes()
          : new Date().getMinutes();
      let ss =
        new Date().getSeconds() < 10
          ? "0" + new Date().getSeconds()
          : new Date().getSeconds();
      _this.getTime = yy + "-" + mm + "-" + dd + " " + hh + ":" + mf + ":" + ss;
      console.log(_this.getTime);
    },
    change() {
      // 页面逻辑执行完毕后调用reload方法
      console.log("刷新");
      this.reload();
    },
  },
};
</script>
<style lang="less">
.messageBox-unsubscribe {
  width: 400px !important;
  height: 400px !important;
  border: 4px solid orange !important;
  background-color: whitesmoke !important;
  .el-message-box__header {
    padding-top: 0 !important;
  }
  .el-message-box__status.el-icon-warning {
    display: none;
  }
  .el-message-box__message p {
    text-align: center;
    color: black;
    margin-top: 20px;
    font-size: 22px !important;
    font-weight: 400 !important;
  }
}
.btn-cancel-unsubscribe {
  float: right !important;
  margin-right: 30px !important;
  margin-top: 100px !important;
  width: 140px !important;
  height: 40px !important;
  line-height: 5px !important;
  background-color: orange !important;
  color: white !important;
  font-size: 16px !important;
}
.btn-confirm-unsubscribe {
  margin-right: 20px !important;
  margin-top: 100px !important;
  width: 140px !important;
  height: 40px !important;
  line-height: 5px !important;
  font-size: 16px !important;
}
.messageBox-reset {
  width: 800px !important;
  height: 500px !important;
  background-color: whitesmoke !important;
  .el-message-box__header {
    padding-top: 100px !important;
  }
  .el-message-box__status.el-icon-warning {
    display: none;
  }
  .el-message-box__message p {
    text-align: center;
    color: black;
    margin-top: 20px;
    font-size: 22px !important;
    font-weight: 400 !important;
  }
}
.btn-confirm-reset {
  margin-right: 20px !important;
  margin-top: 100px !important;
  width: 140px !important;
  height: 60px !important;
  line-height: 5px !important;
  font-size: 16px !important;
}
.register {
  .docBox {
    .el-form-item {
      margin-bottom: 15px;
    }
    .el-form-item__label {
      font-weight: bolder;
    }
    .el-form-item__content {
      text-align: left;
    }
  }
  .el-row {
    margin-left: 0px !important;
  }
  .main-pagination {
    position: absolute;
    bottom: 20px;
    right: 50px;
  }
}
</style>
<style scoped></style>
